.top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-image: url("bg.jpg");
  /* 假设深色背景 */
  /* 让背景图片覆盖整个元素 */
  background-size: cover;
  /* 背景图片在元素中居中显示 */
  background-position: center;
  /* 禁止背景图片重复 */
  background-repeat: no-repeat;
  color: white;
  padding: 20px;
}

.time {
  align-self: flex-start;
}

.functionButtons {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 10px;
}

.addFriendBtn {
  width: 100px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.445);
  color: white;
  border: 1px solid black;
  border-radius: 10px;
  margin-top: 10px;
  cursor: pointer;
}

.newVisitorBtn {
  width: 100px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.445);
  color: white;
  border: 1px solid black;
  border-radius: 10px;
  margin-top: 10px;
  cursor: pointer;
  margin-left: 100px;
}

.searchIcon {
  width: 20px;
  height: 20px;
  background-color: #00000068;
  /* 浅灰色背景 */
  border-radius: 50%;
  /* 使图标呈圆形 */
  padding: 3px;
  /* 内边距 */
  border: 1px solid #ccc;
  /* 细灰色边框 */
  font-size: 15px;
  margin-top: 10px;
  margin-left: 10px;


}

.menuIcon {
  width: 20px;
  height: 20px;
  background-color: #00000068;
  /* 浅灰色背景 */
  border-radius: 50%;
  /* 使图标呈圆形 */
  padding: 3px;
  /* 内边距 */
  border: 1px solid #ccc;
  /* 细灰色边框 */
  font-size: 15px;
  margin-top: 10px;

}

.phonto {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-top: 10px
}

/* 新增头像和文字容器样式 */
.avatarAndText {
  display: flex;
  align-items: center;
}

.avatarAndText p {
  margin-left: 10px;
  /* 文字与头像的间距 */
}

/* 抖音id */
.douyinId {
  font-size: 10px;
}

.bottom {
  padding: 5px;
  /* background-color: paleturquoise; */
}

/* 粉丝 */
.fensi {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
  /* background-color: palegreen; */
}

/* 字体样式剧中 */
.statItem {
  text-align: center;
}

/* 数量 名称样式 */
.statNum {
  font-size: 18px;
  font-weight: bold;

}

/* 字体样式 大小 获赞等等 */
.statLabel {
  font-size: 14px;
}

/* 点击介绍 */
.jsarea {
  width: 300px;
  height: 20px;
  margin-bottom: 10px;
  padding: 2px;
  border-radius: 20px;
  border: none;
}

/* 添加年龄 */
.tagsArea {
  margin-bottom: 10px;
}

.addTagBtn {
  background-color: transparent;
  border: none;
  cursor: pointer;
}

/* 抖音商城 */
.shopPromo {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  font-size: 40px;
}

.shopIcon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  

}

.shopText {
  font-size: 18px;
  margin-top: 13px;
  margin-left: 10px;
}

/* 按钮i编辑资料 */
/* .actionButtons {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
  } */
.editBtn {
  width: 150px;
  height: 40px;
}

.addBtn {
  width: 150px;
  height: 40px;
  margin-left: 40px;
}

/* 作品 */
.contentTabs {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
}

.tabBtn {
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.workDisplay {
  display: flex;
}

.workItem {
  margin-right: 10px;
  position: relative;
  /* 让包含视频和播放量的容器相对定位，作为播放量绝对定位的参考 */
}

.workThumbnail {
  /* 原有的样式保持不变 */
  width: 100%;
  height: 150px;
  background-color: #666;
  margin-bottom: 5px;
  overflow: hidden;
  /* 防止视频超出容器部分显示 */
}

.workViewCount {
  position: absolute;
  /* 绝对定位 */
  bottom: 5px;
  /* 距离底部5px */
  font-size: 10px;
  left: 5px;
  /* 距离左边5px */
  color: white;
  /* 文字颜色 */
  /*background-color: rgba(0, 0, 0, 0.5);  半透明黑色背景 */
  padding: 1px 2px;
  /* 内边距 */
  border-radius: 3px;
  /* 圆角 */
}

/* 视频大小 */
video {
  width: 100px;
  height: 150px;
  object-fit: cover;
  /* 保持纵横比并铺满容器，裁剪多余部分 */
}

.enlargedVideo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.8);
  object-fit: contain;
  display: block;
  /* 确保视频元素可见 */
}

/* 关注粉丝样式 */
.FriendsItem {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.avatarfriend {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 15px;
}

.friendInfo {
  flex: 1;
}

.yhadd {
  margin-left: 380px;

}


.editProfilePage {
  padding: 20px;
}

.avatarSection {
  margin-bottom: 20px;
}

.avatar {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 10px;
}

.inputSection {
  margin-bottom: 10px;
}

.saveButton {
  margin-top: 20px;
}


/* shopping样式 */
.shopbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
}

.inputWrapper {
  position: relative;
  width: 100%;
}

.seacher {
  width: 90%;
  height: 40px;
  margin-left: 20px;
  border-radius: 50px;
  border: 2px solid red;
  padding-right: 60px;
  /* 为按钮留出空间 */
  box-sizing: border-box;
}


.nav {
  display: flex;
  justify-content: space-between;
  /* padding: 10px 0; */
  /* border: 1px solid; */
  width: 100%;
  border-top: 1px solid rgb(230, 229, 229);
}

.navItem {
  text-decoration: none;
  color: #333;
  font-size: 18px;
}

.itemList {
  width: 45%;
  height: 250px;
  /* border: 1px solid red; */
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
  border-radius: 10px;
  box-shadow: 1px 1px 5px gray;
}

.pp1 {
  font-size: 18px;
  font-weight: bold;
}

.itemList img {
  width: 100%;
  height: 150px;
  border-radius: 10px 10px 0 0;
}

.nav_content {
  width: 100%;
  height: 100%;
  /* border: 1px solid blue; */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* .active {
  color: red;
  border-bottom: 1px solid #000;
} */

/* 添加悬停效果 */
.navItem:hover {
  color: red;
  /* border-bottom: 1px solid #000; */
}

.icons {
  display: flex;
  justify-content: space-around;
  margin: 20px;
}

.icon {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon svg {
  width: 30px;
  height: 30px;
}

.icon p {
  margin-top: 5px;
  font-size: 14px;
}

/* 新增商品展示区样式 */
.products {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  border: 1px solid black;
}

.product {
  width: 45%;
  margin-bottom: 20px;
  border: 1px solid #ff0000;
  border-radius: 5px;
  overflow: hidden;
}

.product img {
  width: 200px;
  height: 180px;
}

.productInfo {
  padding: 5px;
}

.productTitle {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 1px;
}

.productPrice {
  color: red;
  font-size: 16px;
  margin-bottom: 1px;
 
}

.productSaleInfo {
  font-size: 12px;
  color: #666;
}

* {
  margin: 0;
  padding: 0;
}


/* 详情页 */
.content {
  height: 300px;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  user-select: none;
}

.container {
  padding: 16px;
}

.slideImg {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.priceAndSaleInfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.discountedPrice {
  color: #ff4500;
  font-size: 20px;
  font-weight: bold;
}

.originalPrice {
  color: #999;
  text-decoration: line-through;
  font-size: 16px;
}

.soldQuantity {
  color: #666;
  font-size: 16px;
}

.couponInfo {
  color: #ff4500;
  font-size: 16px;
  margin-bottom: 10px;
}

.productTitle {
  font-size: 20px;
  margin-bottom: 5px;
}

.compatibleModels {
  font-size: 16px;
  color: #666;
  margin-bottom: 15px;
}

.productIntroduction {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 15px;
}

.featuresAndAfterSale {
  display: flex;
  flex-direction: column;
}



.delivery {
  width: 400px;
  height: 50px;
  /* border: 1px solid black; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.afterSale {
  width: 220px;
  height: 30px;
  /* border: 1px solid red; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sizeSection {
  margin-top: 35px;
}

.changeradio {
  width: 400px;
  height: 50px;
  /* border: 1px solid red; */
  display: flex;
  justify-content: space-around;
}

.actionButtons {
  width: 430px;
  height: 50px;
  display: flex;
  /* border: 1px solid black; */
  justify-content:center;
  margin-top: 50px;
  background-color: rgb(255, 143, 25);
}

.actionButtons button {
  width: 220px;
  height: 50px;
}
